// import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import 'katex/dist/katex.min.css';
import katex from 'katex';
import { saveAs } from 'file-saver';

class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      katexSource: 'c = \\pm\\sqrt{a^2 + b^2}',
    }

    this.handleFileChanged  = this.handleFileChanged.bind(this);
    this.handleValueChanged = this.handleValueChanged.bind(this);
    this.loadJSON           = this.loadJSON.bind(this);
    this.saveToJSON         = this.saveToJSON.bind(this);

    this.fileInput          = React.createRef();
  }

  componentDidMount(){
    const demoString = 
`c = \\pm \\sqrt{a^2 + b^2} \\\\ 
\\begin{aligned} 
  a^2&+b&=c \\\\ 
  c&+d^2 &= e 
\\end{aligned}`;
    this.setState({
      katexSource: demoString,
    })
    this.renderMathString(demoString)
  }

  handleFileChanged(event){
    let reader = new FileReader();
    reader.onload = (e) => {      
      const source = JSON.parse(e.target.result);
      this.setState({
        katexSource: source
      })
      this.renderMathString(source);
    };

    reader.readAsText(event.target.files[0]);
  }

  handleValueChanged(event){
    const source = event.target.value;
    this.setState({
      katexSource: source
    })
    this.renderMathString(source);
  }

  loadJSON(event){
    this.fileInput.current.click();
  }

  saveToJSON(event){
    const source = this.state.katexSource;
    if(!source) return;
    const json = JSON.stringify(source);
    console.log(json);
    let blob = new Blob([json], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "katex.json");
  }

  renderMathString(str){
    if(!str) return;

    const element = document.getElementById('katex');
    katex.render(`${str}`, element, {
      throwOnError: false
    });
  }

  render(){
    return (
      <div className='App-header'>
        <h2>Katex 在线渲染</h2>
        <div className="div-table">
          <div className='row'>
            <div className='cell'>
              源<br/>
              <input type='file' 
                onChange={this.handleFileChanged}
                multiple={false}
                hidden={true}
                ref={this.fileInput}/>
              <div style={{margin:'5px'}}>
                <button style={{marginRight:'5px'}} onClick={this.loadJSON}>导入JSON</button>
                <button onClick={this.saveToJSON}>保存</button>
              </div>
            </div>
          </div>
          <div className='row'>
            <div className='cell'>
              <textarea  style={{minWidth:'77vw',minHeight:'30vh', margin:'5px', fontSize:'calc(10px + 1.5vmin)'}} value={this.state.katexSource} onChange={this.handleValueChanged}></textarea>
            </div>
          </div>
          <div className='row'>
            <div className='cell'>渲染结果</div>
          </div>
          <div className='row'>
            <div className='cell'>
              <div style={{minWidth:'77vw', minHeight:'40vh', margin:'5px', backgroundColor:'#ffffff', color:'#000000', border:'1px solid red'}} >
                <span  className='katex'  id='katex' > </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
